package content.views.works;
import feffects.easing.Quad;
import haxe.Timer;
import js.Lib;
import tools.ASprite;
import js.w3c.html5.Core.HTMLImageElement;
import js.w3c.level3.Events.Event;

/**
 * Work
 * @author PRASS
 */

class ScreenShot extends ASprite 
{
		
	public var regW				: Int;
	public var regH				: Int;
	
	private var _body 			: ASprite;
	private var _loader			: ASprite;
	private var _loaderImg		: HTMLImageElement;
	private var _url 			: String;
	private var _contentRatio	: Float;		
		
	private var _timer			: Timer;
	
	public function new( j : JQuery, id : String) 
	{
		super(j);
		
		_loaderImg = untyped js.Lib.document.createElement("IMG");
		
		dom.append('<div id="bodyScreenShot'+id+'"></div><div id="worksLoader'+id+'" class="waiterLoader"></div>');
		_body = new ASprite( new JQuery("#bodyScreenShot"+id) );
		_body.dom.addClass("bodyShot");
		
		_body.dom.css("z-index", "10");
		
		_contentRatio = 740 / 456;
		
		_loader = new ASprite( new JQuery("#worksLoader"+id));
		_loader.visible(false);
		
		setAlpha(0);
	}
	
	public function load( url : String, _delay : Int = 0 ) : Void
	{	
		unactive( true );
		
		_url = url;
		_loader.visible(true);
		
		_body.tween(1, _body.setAlpha, 0, 400, Quad.easeOut, _reload, _delay);
		_body.dom.mouseover( null );
	}
	
	private function _reload() : Void
	{
		_loaderImg.onload = _apply;
		_loaderImg.src = _url;
	}
	
	private function _apply(e) : Void
	{
		_loader.visible(false);
		_body.dom.css("background-image", "url(" + _url + ")");
		
		_body.tween(_body.getAlpha(), _body.setAlpha, 1, 400, Quad.easeInOut);
		
		_body.dom.mouseover( function(e) { _active(); } );
	}
	
	private function _active() : Void
	{
		_body.dom.mouseover( null );
		_body.dom.mousemove( function(e) { checkMousePos(e); } );
		
		if (_timer != null)
		{
			_timer.stop();
			_timer = null;
		}
		
		_mouseY = 0;
		
		_timer = new Timer(30);
		_timer.run = _onMove;
	}
	
	private function checkMousePos(e) : Void
	{
		_mouseX = e.pageX - 366;
		_mouseY = e.pageY - 100;		
	}
	
	private function _onMove() : Void
	{	
		_currentPX = (_mouseX / regW  )  * (-_bgW+regW);//-1200
		_currentPY = (_mouseY / regH  )  * (-_bgH+regH);//-740

		_currentPX = Math.min( 0, Math.max( _currentPX, _limitLeft) );
		_currentPY = Math.min( 0, Math.max( _currentPY, _limitLow) );
		
		_smoothPY = _smoothPY + ( _currentPY - _smoothPY ) * .2;
		_smoothPX = _smoothPX + ( _currentPX - _smoothPX ) * .2;
		
		_body.dom.css("background-position", _smoothPX+"px "+_smoothPY+"px");
	}
	
	public function unactive( hardKill : Bool ) : Void
	{
		_body.dom.mousemove( null );
		if ( _timer != null) _timer.stop();
		//if (!hardKill) 
		_body.dom.mouseover( function(e) { _active(); } );
	}
	
	public function resize(_w:Int, _h:Int):Void
	{
		regW = cast _w / 1.75;
		regH = cast _h / 1.75;
		
		setWidth(regW);
		setHeight(regH);
		
		
		var _screen : Float = regW / regH;
		
		if ( _screen >= _contentRatio )
		{
			_bgW 	= regW;
			_bgH	= cast ( (regW / 7.4) * 4.56 );
			
		} else {
			
			_bgW 	= cast ( (regH / 4.56) * 7.4);
			_bgH	= regH;
		}
		
		//bgX = cast ( ( regW - _bgW	) * .5 );
		//bgY = cast ( ( regH - _bgH	) * .5 );
		
		_limitLeft 	= regW - _bgW;
		_limitLow	= regH - _bgH;
		
		_body.dom.css("background-size", _bgW+"px "+_bgH+"px");
	}
	
	private var _limitLeft	: Int;
	private var _limitLow	: Int;
	
	private var _bgW 		: Int;
	private var _bgH 		: Int;
	
	private var _currentPX	: Float;
	private var _currentPY	: Float;
	private var _smoothPX	: Float;
	private var _smoothPY	: Float;
	private var _mouseY 	: Float;
	private var _mouseX 	: Float;
	
}